<template>
    <s-layout title="关注" navbar="custom1" color='#333333' :bgStyle="{ color: '#fff' }">
        <assNavbar title="关注" :background="{ BGcolor: '#fff', img: 'none' }">
        </assNavbar>
        <view class="searchBar">
            <uni-search-bar class="ss-flex-1" radius="33" placeholder="请输入关键字" cancelButton="none" :focus="true"
                @input="onSearch" />
        </view>
        <view>
            <view class="list" @click="jump('/pages/user/userCenter/index?id=' + item.be_user_id)"
                v-for="(item, index) in state.filterCareList" :key="item">
                <view class="avatar">
                    <image :src="item.avatar ? sheep.$url.cdn(item.avatar) : 'https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/static/img/default_avatar.png?x-oss-process=image/resize,w_200,h_200'" mode="aspectFill" style="width: 100%;height: 100%;"></image>
                </view>
                <view class="name">{{ item.nickName || '空' }}</view>
            </view>
        </view>


    </s-layout>
</template>
<script setup>
import assNavbar from '@/components/ass-navbar.vue'
import sheep from '@/sheep';
import { ref, reactive, computed } from 'vue'
import assApi from '@/association/api'
import { onLoad, onShow } from '@dcloudio/uni-app';
// 用户信息
const userInfo = computed(() => sheep.$store('user').userInfo);
const state = reactive({
    careList: [],
    filterCareList: []
})
onLoad(async (options) => {
    let careList = await assApi.info.careList({
        mobile: options.mobile
    })
    state.careList = careList.data
    state.filterCareList = state.careList
})
onShow(async () => {
    // let pagearr = getCurrentPages();//获取应用页面栈
    // let currentPage = pagearr[pagearr.length - 1];//获取当前页面信息
    // console.log('option:', currentPage.options)//获取页面传递的信息
    // let careList = await assApi.info.careList({
    //     mobile: currentPage.options.mobile
    // })
    // state.careList = careList.data
    // state.filterCareList = state.careList
})

const follow = async (id, index) => {
    let res = await assApi.info.operate({
        be_user_id: id
    })
    state.careList[index].status = res.data.is_care
    state.filterCareList[index].status = res.data.is_care
}

const jump = (url) => {
    sheep.$router.go(url);
}
const onSearch = (info) => {
    if (info) {
        state.filterCareList = state.careList.slice().filter(item => item.mobile.includes(info));
    } else {
        state.filterCareList = state.careList
    }


}
</script>
<style lang="scss" scoped>
.searchBar {
    width: 100vw;
    height: 100rpx;
    border-bottom: 2rpx solid #f3f3f3;
}

.list {
    height: 160rpx;
    width: 750rpx;
    position: relative;
    border-bottom: 2rpx solid #f3f3f3;

    .avatar {
        width: 112rpx;
        height: 112rpx;
        border-radius: 50%;
        overflow: hidden;
        position: absolute;
        left: 24rpx;
        top: 24rpx;
    }

    .name {
        position: absolute;
        left: 168rpx;
        top: 64rpx;
    }

    .status {
        position: absolute;
        top: 52rpx;
        right: 32rpx;
        width: 156rpx;
        height: 56rpx;
        background: #FAFAFA;
        border-radius: 28rpx;
        text-align: center;
        line-height: 56rpx;
        color: #999999;
        border: 2rpx solid #FAFAFA;
    }

    .no {
        color: #48DFBD;
        border: 2rpx solid #48DFBD;
    }


}


button::after {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
button {
  background-color: transparent !important;
  padding: 0 !important;
  line-height: inherit !important;
  margin: 0 !important;
  width: auto !important;
  font-weight: 500 !important;
  border-radius: none !important;
}
</style>
